<template>
  <el-row type="flex" justify="center">
    <el-col :span="23" style="background-color: #ffffff; padding: 20px 0">
      <el-row type="flex" justify="center">
        <el-col :span="21">
          <el-card>
            <div slot="header">
              <span style="font-size: 18px">案例基本信息</span>
            </div>
            <el-descriptions :column="1" style="min-width: 85px;">
              <el-descriptions-item label="所属区域">
                <!-- 河北省 -->
                {{ province }}
              </el-descriptions-item>
              <el-descriptions-item label="案例名称">
                {{ caseName }}
              </el-descriptions-item>
              <el-descriptions-item label="应用部门">
                {{ department }}
              </el-descriptions-item>
              <el-descriptions-item label="案例类型">
                {{ caseType }}
              </el-descriptions-item>
              <el-descriptions-item label="首页地址">
                <a href="//www.baidu.com" target="_blank">{{ ipAddress }}</a>
              </el-descriptions-item>
              <el-descriptions-item label="关键字">
                {{ crux }}
              </el-descriptions-item>
              <el-descriptions-item label="简要介绍">
                {{ introduce }}
              </el-descriptions-item>
              <el-descriptions-item label="案例图片">
                <div class="case-img">
                  <div class="case-img-div" v-for="item of casePicture">
                    <el-image style="height: 100%;" :src="item" :preview-src-list="casePicture" />
                  </div>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
          <br />
          <br />
          <br />
          <el-card>
            <div slot="header">
              <span style="font-size: 18px">单位信息</span>
            </div>
            <el-descriptions :column="1" style="min-width: 85px;">
<!--              <el-descriptions-item label="联系人">-->
<!--                {{ userName }}-->
<!--              </el-descriptions-item>-->
              <el-descriptions-item label="联系单位">
                {{ company }}
              </el-descriptions-item>
              <el-descriptions-item label="联系地址">
                {{ address }}
              </el-descriptions-item>
<!--              <el-descriptions-item label="联系电话">-->
<!--                {{ phone }}-->
<!--              </el-descriptions-item>-->
<!--              <el-descriptions-item label="电子邮箱">-->
<!--                {{ email }}-->
<!--              </el-descriptions-item>-->
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
/**
 *{ 应用中心详情 }
 * @param:
 * @author: 宋康
 * @DateTime: 2022/7/1
 */
import { application, appinquire } from "@/api/application-center";
export default {
  name: "ApplicationCenterDetailed",
  data() {
    return {
      id: "1",
      province: "",
      caseName: "",
      department: "",
      caseType: "",
      ipAddress: "",
      crux: "",
      introduce: "",
      casePicture: [],
      userName: "",
      company: "",
      address: "",
      phone: "",
      email: "",
    };
  },
  mounted() {
    this.appDetails();
  },
  methods: {
    appDetails() {
      this.id = this.$route.query.id;
      application(this.id).then((res) => {
        this.province = res.data.province;
        this.caseName = res.data.caseName;
        this.department = res.data.department;
        this.caseType = res.data.caseType;
        if (res.data.caseType == "0") {
          this.caseType = "全部";
        } else if (res.data.caseType == "1") {
          this.caseType = "桌面端";
        } else if (res.data.caseType == "2") {
          this.caseType = "WEB端";
        }
        this.ipAddress = res.data.ipAddress;
        this.crux = res.data.crux;
        this.introduce = res.data.introduce;
        this.casePicture = res.data.casePicture.split(",");
        this.userName = res.data.userName;
        this.company = res.data.company;
        this.address = res.data.address;
        this.phone = res.data.phone;
        this.email = res.data.email;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.case-img {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .case-img-div {
    width: 210px;
    height: 140px;
    margin: 0 5px 10px 5px;

    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
